<template>
  <div class="bg-white all-module">
    <dc-row ng-if="menus.length > 0">
      <dc-col class="p30" span="6" v-for="(menu, index) in menus" :key="menu.id">
        <router-link :to="'/'+ menu.menuUrl" tag="div">
          <i class="iconfont" :class="menu.menuIcon" :style="{color: colors[index]}"></i>
          <div class="module-name">{{menu.menuName}}</div>
        </router-link>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  /**
   * @namespace  components/home/reports
   * @author ashen
   * @description 首页模块集合
   */
  import {col, row} from '@/components/Flex';

  export default {
    components: {
      'dc-col': col,
      'dc-row': row
    },
    props: {
      menus: Array
    },
    data () {
      return {
        colors: ['#6ACFDE', '#6A92DE', '#66CF8E', '#FE8A70', '#FFCA6F', '#66CF8E', '#F15B59', '#8D8BE7']
      };
    }
  };
</script>
<style lang="scss">
  @import '../../../assets/css/variable';
  .all-module {
    padding: px2rem(20px) px2rem(15px);
    .module-name {
      font-size: px2rem(26px);
      color: #4d4d4d;
      margin-top: px2rem(12px);
    }
    i {
      font-size: px2rem(72px);
    }
    .p30 {
      padding: px2rem(30px) 0;
    }
  }
</style>
